<div id="vue-app">
  <header>
    <ppz-nav></ppz-nav>
    <div class="operations">
      <div class="btns">
        <icon-btn iid="light" @click="refresh" title="刷新"></icon-btn>
        <icon-btn iid="filter" @click="$refs.fieldSelector.showModal()" title="字段选择"></icon-btn>
        <dialog class="middle" ref="fieldSelector">
          <div class="modal"></div>
          <div class="title">字段选择</div>
          <div class="body">
            <ppz-checkbox v-for="f in fields" v-model="f.show" :label="f.name"></ppz-checkbox>
          </div>
          <div class="btns">
            <button @click="select1()">全选</button>
            <button @click="select_1">反选</button>
            <button @click="select0">全不选</button>
            <button @click="$refs.fieldSelector.close()">关闭</button>
          </div>
        </dialog>
        <icon-btn iid="add" @click="newRecord()" title="插入"></icon-btn>
        <icon-btn iid="copy" @click="newRecord(true)" title="拷贝"
          :disabled="!pneOptions || pneOptions.focus.y === undefined"></icon-btn>
        <icon-btn iid="save" @click="save" title="保存"
          :disabled="!hasPK || !isEditing"></icon-btn>
        <icon-btn iid="undo" @click="undo" title="撤销全部"
          :disabled="!hasPK || !isEditing"></icon-btn>
        <icon-btn iid="delete" @click="drop" title="删除"
          :disabled="!hasPK || pneOptions.focus.y === undefined"></icon-btn>
        <icon-btn iid="terminal" @click="terminal" title="打开终端"></icon-btn>
      </div>
      <ppz-pagination :count="selectParams.page.count"
        @click.capture="beforePage"
        v-model:index="selectParams.page.index"
        v-model:size="selectParams.page.size"
        @change="putData"
        ></ppz-pagination>
    </div>
  </header>
  <div class="table-wrapper">
    <ppz-pne :fields="fields" :records="records" :options="pneOptions" :editable="hasPK"></ppz-pne>
  </div>
</div>